<template lang="pug">
.list
  .top <!--搜索区域-->
    .search
      el-input(placeholder="品牌名称/注册商标号" clearable prefix-icon="el-icon-search" v-model="searchString" @change="changeSearch")
    .set
      el-button(type="primary", :disabled="isDisabled" size="small" @click="listPass" v-if="$permission('AB-03002-001')") 批量通过
      el-button(name="info", :disabled="isDisabled" size="small" @click="listRefuse" v-if="$permission('AB-03002-001')") 批量拒绝

  .table <!--表格区域-->
    el-table(
      height="100%"
      :data="tableData" 
      :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
      border 
      style="width: 100%"
      v-loading="loading"
      empty-text="未找到符合条件的内容"
      @selection-change="changeSelection"
    )
      el-table-column( type="selection" width="55" align="center")
      el-table-column(fixed type="index" label="序号" width="55" align="center")
      el-table-column(prop="companyName" label="代理公司" width="150" align="center")  
        template(slot-scope="scope")
          .brandView(@click="viewBrand(scope.row)") {{ scope.row.companyName }}        
      el-table-column(prop="isImport" label="产地" width="120" align="center")
        template(slot-scope="scope")
          .table-item-status(v-if="scope.row.isImport == '1'") 进口 
          .table-item-status(v-if="scope.row.isImport == '2'") 国产
      el-table-column(prop="name" label="品牌名称" width="120" align="center")    
      el-table-column(prop="brandCompany" label="品牌公司" width="250" align="center")    
      el-table-column(prop="personsInChargeOfCompany" label="负责人" width="100" align="center")
      el-table-column(prop="personsInChargeOfCompanyPhone" label="联系电话" width="120" align="center")          
      el-table-column(prop="logo" label="logo" width="100" align="center")
        template(slot-scope="scope")
          .table-item-perview(@click="logoPerview(scope.row)") 预览
          //- img(:src="scope.row.logoUrl" style="width:35px")
      el-table-column(prop="certificate" label="证件附件" width="150" align="center")
        template(slot-scope="scope")
          .table-item-perview(@click="perview(scope.row)") 预览
      el-table-column(prop="createDate" sortable label="申请时间" width="150" align="center")
        template(slot-scope="{ row }") 
          //- 将时间进行格式化
          .create-time {{ row.createDate | filterDate }}
      el-table-column(fixed="right" label="操作" width="150" align="center")
        template(slot-scope="scope")
          el-button(plain class="pass" @click="pass(scope.row)" v-if="$permission('AB-03002-001')") 通过
          el-button(plain class="refuseBtn" @click="refuse(scope.row)" v-if="$permission('AB-03002-001')") 拒绝

  view-brand-model(
    :audit="audit" 
    :show="showDialog" 
    :item="currentItem" 
    @close="closeModal" 
    @confirm="confirmModal"
    @failer="failerModel"
    )
  //- audit-dialog(:auditShow="showAuditDialog" @auditClose="auditCloseModal" @auditConfirm="auditConfirmModal")
  .index-pagination <!--分页区域-->
    .pagination-total 共 {{ total }} 条
    .pagination-sizes 20 条/页
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    )
      //- el-pagination(@current-change="handleCurrentChange" :page-size="100" layout="prev, pager, next, jumper" :total="1000")
</template>

<script>
import { loadSupplierBrands,batchAudit} from 'api'
import viewBrandModel from '@/components/modal/viewBrandModel'
import reviewBrandModel from '@/components/modal/reviewBrandModel'
import auditDialog from '@/components/modal/auditDialog'
import { mapActions } from 'vuex'
export default {
  name: 'auditList',
  components: {
    viewBrandModel,
    reviewBrandModel,
    auditDialog
  },
  data () {
    return {
      total:0,
      currentPage: 1,
      pageSize:20,
      tableData:[],
      searchString:'',
      logoUrl:'',
      showDialog:false,
      showAuditDialog:false,
      currentItem: {},     
      audit:{
        title:'品牌审核',
        auditFailer:'审核失败',
        auditSuccess:'审核通过',
        sure:'确定',
        reviewStatus:1
      }, 
      selection: [],
      loading: false,    
    }
  },
  computed: {
    isDisabled () {
      return !this.selection.length
    }
  },
  methods:{
    ...mapActions([
      'changePreviewModal',
      'changeCarousel'
    ]),
     // 搜索
    changeSearch () {
      this.currentPage = 1
      this.getBrandList()
    },
    async getBrandList () {
      try {
        this.loading = true
        let query = { ...this.$route.query,reviewStatus: 1, }
        query.currentPage = this.currentPage
        query.pageLines = this.pageSize
        if (this.searchString) query.searchString = this.searchString
        const { ResultSet } = await this.$axios.post(loadSupplierBrands, { ...query })
        this.tableData = ResultSet.userData.loadBrandList
        this.total=ResultSet.recordNumber
        this.loading = false
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.getBrandList()
    },
    // logo预览
    logoPerview (row) {
      this.changePreviewModal({
        show: true,
        url: row.logoUrl
      })
      console.log(row.logoUrl)
    },
    // 证书预览
    perview (row) {
      if (!row.certificateList.length) {
        this.$message.error('该品牌还没有上传证件附件！')
        return
      }
      this.changeCarousel({ list: row.certificateList, show: true })
    },
    toAuditList(){
      this.$router.push({ name: 'auditList' })
    },
    // 品牌审核
    viewBrand (row) {
      console.log(row)
      this.showDialog = true 
      this.currentItem = row
    },
    // 关闭品牌审核弹框
    closeModal () {
      this.showDialog = false
      this.currentItem = {}
    },
     // 单条通过
    pass(row){  
      console.log(row)    
      this.$confirm('请输入审核意见', '审核通过',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showInput:true,
        inputPlaceholder:'请输入审核意见',
        type: 'success'
      }).then(async ({ value }) => {
        try {
          await this.$axios.post(batchAudit, { supplierBrandIdList: row.supplierBrandId,reviewStatus: 2,reviewRemark: value })
          this.$message.success('审核成功！')
          this.getBrandList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    // 批量通过
    listPass(){   
      console.log(this.item) 
      if(!this.selection.length) {
        this.$message.error('至少选择一个品牌！')
        return
      } 
      this.$confirm('请输入审核意见', '审核通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showInput:true,
        inputPlaceholder:'请输入审核意见',
        type: 'success'
      }).then(async ({ value }) => {
        try {          
          let idList = this.selection.map(item => item.supplierBrandId).join(',')
          console.log(idList)
          await this.$axios.post(batchAudit, { supplierBrandIdList: idList, reviewStatus: 2, reviewRemark: value })
          this.$message.success('审核成功！')
          this.getBrandList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    // 单条拒绝
    refuse(row){      
      console.log(row)   
      this.$prompt('*请输入审核意见', '审核失败',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showInput:true,
        inputPlaceholder:'请输入审核意见',
        inputPattern:/\S/,
        inputErrorMessage: '内容不能为空'
      }).then(async ({ value }) => {
        try {
          await this.$axios.post(batchAudit, { supplierBrandIdList: row.supplierBrandId,reviewStatus: 3,reviewRemark: value})
          this.$message.success('审核成功！')
          this.getBrandList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
     // 批量拒绝
    listRefuse(){      
      this.$prompt('*请输入审核意见', '批量审核失败', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showInput:true,
        inputPlaceholder:'请输入审核意见',
        inputPattern:/\S/,
        inputErrorMessage: '内容不能为空'
      }).then(async ({ value }) => {
        try {          
          let idList = this.selection.map(item => item.supplierBrandId).join(',')
          console.log(idList)
          await this.$axios.post(batchAudit, { supplierBrandIdList: idList, reviewStatus: 3,reviewRemark: value})
          this.$message.success('审核成功！')
          this.getBrandList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    changeSelection (selection) {
      this.selection = selection
    },
    
    // 关闭批量审核弹框
    auditCloseModal (row) {
      this.showAuditDialog = false
      this.currentItem = {}
    },
    confirmModal () {
      this.showDialog = false
      this.currentItem = {}
      this.getBrandList()
    },
    failerModel() {
      this.showDialog = false
      this.getBrandList()
    },
    auditConfirmModal(){
      this.showDialog = false
      this.getBrandList()
    }
  },
  beforeRouteEnter (to, from, next) {
      // ...
    next(vm => {
      // vm.initFilter()
      vm.getBrandList()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getBrandList()
    // this.initFilter()
  },
  
} 
</script>

<style lang="scss" scoped>
  .list {
    height: 100%;
    width: 100%;
    padding: 0 40px;
    background: #FFFFFF;
    border: 1px solid #F3F3F4;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #F3F3F4;
    border-radius: 10px;
  }
  .cont{
    padding:0;
    .el-card__body{
      padding:16px 40px;
    }
  }
  .title{
    margin-top: 15px;
    margin-bottom:15px;
    color:#B2B4C7;
  }
  .top{
    width:100%;
    height:40px;
    margin-top:16px;
    margin-bottom:16px;
    display:flex;
    justify-content: space-between;
      .search{
        .icon-search{
          cursor: pointer;
        }
        .ipt{
          color:#B2B4C7;
        }
        .icon-Search{
          cursor: pointer;
        }
      }
      .add{
        width: 96px;
        height: 32px;
        background: #FF708B;
        border-radius: 6px;
        color:#fff;
        margin-right:16px;
      }
      .refuse{
        width: 96px;
        height: 32px;
        background: #F6F6F9;
        border-radius: 6px;
        color:rgba(100, 105, 143, 0.5);
      }
      .icon-setting:before{
        margin-right:5px;
      }
      .setting{
        width: 46px;
        height: 32px;
        line-height:32px;
        text-align:center;
        margin-left:15px;
        color:#C4C4C4;
        background: #F6F6F9;
        border-radius: 6px;
      }
  }
  .table{
    height: calc(100% - 150px);
    el-table-column{
      text-align:center;
    }
    .el-table .el-table__cell{
      text-align:center;
    }
    .pass{
      background: #FDEFF1;
      border-radius: 6px;
      color:#FF2E42;
      padding: 5px 8px;
      font-size: 12px;
    }
    .refuseBtn{
      background: #F6F6F9;
      border-radius: 6px;
      color:#3E4373;
      padding: 5px 8px;
      font-size: 12px;
    }
    .brandView{
      color:#FF2E42;
      cursor: pointer;
    }
  }
  .index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
}
.table-item-perview{
  cursor: pointer;
  color:#FF2E42;
}
</style>
